<!--
 * @Author: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @Date: 2022-05-26 16:11:41
 * @LastEditors: 13212657520 10828485+zhaosieve@user.noreply.gitee.com~
 * @LastEditTime: 2022-05-27 14:26:11
 * @FilePath: \vue-2202\src\components\Comment\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="comment">
    <van-field
      class="my-field"
      rows="2"
      autosize
      label="发表评论"
      type="textarea"
      maxlength="50"
      placeholder="请输入"
      v-model="coust"
      show-word-limit
      ref="contentRef"
    />
    <van-button type="primary" block @click="addComment">发表言论</van-button>
    <van-card :desc="v.content" v-for="(v, i) in commentsList" :key="i">
      <template #thumb>
        <div>
          <van-icon name="smile" size="60" />
          <div class="user-name">{{ v.user_name }}</div>
        </div>
      </template>
      <template #title>
        <div class="rate">
          <van-rate v-model="v.rate" readonly /></div
      ></template>
      <template #price>
        {{ v.add_time }}
      </template>
    </van-card>
    <van-loading
      type="spinner"
      size="24px"
      color="#1989fa"
      v-if="isLoading"
      class="loading"
    />
    <van-button @click="toMore" class="but" type="primary" block v-else>{{
      moreText
    }}</van-button>
  </div>
</template>
<script>
import { Comments } from "@/api";
import { addComments } from "@/api";
// import moment from "moment";
export default {
  props: ["id"],
  data() {
    return {
      value: 5,
      page: 1,
      limit: 20,
      commentsList: [],
      hasMore: false,
      isLoading: false,
      coust: "",
    };
  },
  methods: {
    async getComments() {
      const res = await Comments({
        id: this.id,
        page: this.page,
        limit: this.limit,
      });
      this.commentsList = res.data.message;
    },
    async toMore() {
      if (this.hasMore != false) return;
      this.isLoading = true;
      this.page++;
      const res = await Comments({
        id: this.id,
        page: this.page,
        limit: this.limit,
      });
      setTimeout(() => {
        this.commentsList = [...this.commentsList, ...res.data.message];
        this.isLoading = false;
      }, 1000);
      this.hasMore = this.page * this.limit > res.data.count;
    },
    async addComment() {
      if (!this.coust) return;
      await addComments({ id: this.id, content: this.coust });
      this.commentsList.unshift({
        user_name: "匿名用户",
        add_time: Date.now(),
        content: this.coust,
        rate: 5,
      });
      this.coust = "";
      this.$refs.contentRef.focus();
    },
  },
  created() {
    this.getComments();
  },
  computed: {
    moreText() {
      return this.hasMore ? "我也是有底线的" : "加载更多>>>";
    },
  },
};
</script>
<style lang="scss" scoped>
.comment {
  padding: 0 10px;
  .my-field {
    border: 1px solid #eee;
    margin: 10px 0;
  }
  .rate {
    margin-bottom: 15px;
  }
  .but {
    background-color: #fff;
    color: #969799;
    border: 0;
  }
  .loading {
    text-align: center;
  }
}
</style>
